<template>
  <div class="wrap">
    <div class="content">
      <div class="type-search">
        <el-radio-group class="platform-radio" v-model="queryParams.type" size="small" @change="changeOption" :disabled="loading">
          <el-radio-button
            v-for="item in showPlanTypeList"
            :label="item.label"
            :key="item.label"
          >{{item.text}}</el-radio-button>
        </el-radio-group>
      </div>
      <div>
        <template v-if="queryParams.type === PLAN_TYPE_FL()">
          <shipping-plan-list-1></shipping-plan-list-1>
        </template>
        <template v-else-if="queryParams.type === PLAN_TYPE_MW()">
          <shipping-plan-list-2></shipping-plan-list-2>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import addShippingPlanMixin from "@/views/shipment/mixin/addShippingPlanMixin";
import {getPlanStatusStr, getPlanTransferTypeStr, PLAN_TYPE_FL, PLAN_TYPE_MW, planTypeList} from "@/utils/shippingPlan";
import {getShippingPlanList} from "@/api/shippingPlan";
import shipmentList from "@/views/shipment/shipmentList.vue";
import {deepCopy} from "@/utils";
import DelPlanButton from "@/views/shippingPlan/components/DelPlanButton.vue";
import ChangeShippingStatusBtn from "@/views/shippingPlan/components/ChangeShippingStatusBtn.vue";
import ShippingPlanList1 from "@/views/shippingPlan/components/shippingPlanList1.vue";
import ShippingPlanList2 from "@/views/shippingPlan/components/shippingPlanList2.vue";

export default {
  name: 'shippingPlanList',
  components: {ShippingPlanList2, ShippingPlanList1, ChangeShippingStatusBtn, DelPlanButton},
  computed: {
    shipmentList() {
      return shipmentList
    }
  },
  watch: {
    showPlanTypeList(){
      this.queryParams.type = this.showPlanTypeList[0].label
    }
  },
  mixins: [addShippingPlanMixin],
  data(){
    return {
      queryParams: {
        page: 1,
        pageSize: 20,
        warehouseId: 0,
        transferType: '',
        keyword: '',
        status: 'total',
        type: PLAN_TYPE_FL,
      },
      loading: false,
      total: 0,
      planTypeList,
      statusNum: {
        saved: 0,
        ready2Ship: 0,
        shipped: 0,
        finished: 0,
        total: 0,
      },
      tableData: [],
    }
  },
  created() {
    this.getData()
  },
  methods: {
    PLAN_TYPE_FL() {
      return PLAN_TYPE_FL
    },
    PLAN_TYPE_MW() {
      return PLAN_TYPE_MW
    },
    getPlanTransferTypeStr,
    getPlanStatusStr,
    getData(){
      this.loading = true
      getShippingPlanList(this.queryParams)
        .then(res=>{
          this.loading = false
          this.tableData = res.data
          this.statusNum = deepCopy(res.info.statusNum)
          this.total = res.info.total
        })
    },
    changeOption(){
      this.queryParams.page = 1;
      this.getData()
    },
    handleSizeChange(val){
      this.queryParams.PageSize = val;
      this.queryParams.page = 1
      this.getData();
    },
    jumpInfo(row){
      this.$router.push({
        name: 'shippingPlanInfo',
        query: {
          id: row.id
        }
      })
    }
  },
}

</script>

<style scoped lang="scss">
.wrap{
  padding: 20px 30px;
  .content{
    .type-search{
      padding-bottom: 10px;
      border-bottom: 1px solid #DFE6ED;
    }
    .header-search{
      margin-top: 10px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
  }
}
</style>
